import React from 'react'
import {connect} from 'react-redux'
import {deepCopy, messages} from "share/common";
import menuRoute from 'routes/menuRoute'
import {Button, Table, Badge, Tooltip, Popover} from 'antd';
import config from 'config';
import SlideFrame from 'components/slide-frame'
import SearchArea from 'components/search-area';
import costCenterGroupService from 'containers/setting/cost-center-group-class/cost-center-group-class.service';
import 'styles/setting/cost-center-group-class/cost-center-group-class.scss';
import EditCostCenterGroup from "containers/setting/cost-center-group-class/edit-cost-center-group-class";
import ResizeTable from "components/resize-table";

let defaultRecord = {
  id: null,
  enabled: true,
  code: null,
  name: null,
  description: null,
  setOfBooksId: null,
  costCenterId: null,
}
class CostCenterGroupDefine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record: deepCopy(defaultRecord),
      params: {
        setOfBookId: "",
        costCenterGroupCategoryCode: "",
        costCenterGroupCategoryName: ""
      },
      searchForm: [
        {
          type: 'select',
          id: 'setOfBookId',
          label: messages('setting.key368'/*账套*/),
          options: [],
          method: 'get',
          valueKey: 'id',
          labelKey: 'setOfBooksName',
          getParams: {roleType: 'TENANT'},
          getUrl: `${config.baseUrl}/api/setOfBooks/by/tenant`
        }, //账套
        {
          type: 'input',
          id: 'costCenterGroupCategoryCode',
          label: messages('setting.key1668')/*成本中心组类别代码*/
        },
        {
          type: 'input',
          id: 'costCenterGroupCategoryName',
          label: messages('setting.key1665')/*成本中心组类别名称*/
        }
      ],
      loading: false,
      pagination: {
        total: 0,
        page: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      data: [],
      columns: [
        {
          title: messages('setting.key380')/*账套*/,
          dataIndex: 'setOfBooksName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key1668')/*成本中心组类别代码*/,
          dataIndex: 'code',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key1665')/*成本中心组类别名称*/,
          dataIndex: 'name',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key903')/*成本中心*/,
          dataIndex: 'costCenterName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key199'/*描述*/),
          dataIndex: 'description',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'enabled',
          render: (text) => {
            return <span>
            <Badge status={text ? "success" : 'error'}/>
              {text ? messages('common.enabled')/*启用*/ : messages('common.status.disable')/*禁用*/}</span>
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'operate',
          render: (value,record) => {
            return (
              <span>
                <a onClick={(e) => this.onClickEdit(e,record)}>
                  {messages('common.edit')/*编辑*/}
                  </a>
                <a onClick={(e) => this.onRecordDetail(e,record)}
                   style={{marginLeft:'8px'}}>
                  {messages('common.detail')/*详情*/}
                  </a>
              </span>
            )
          }
        }
      ],
      visible: false,
      costCenterGroupClassDetail: menuRoute.getRouteItem('cost-center-group-class-detail', 'key').url,
    }
  }

  componentWillMount() {
    this.getCostCenterGroupClassList();
  };


  //获取成本中心组列表
  getCostCenterGroupClassList = () => {
    const {pagination} = this.state;
    this.setState({
      loading: true,
    });
    let params = this.state.params;
    let _params = {
      setOfBooksId: params.setOfBookId,
      costCenterGroupCategoryCode: params.costCenterGroupCategoryCode,
      costCenterGroupCategoryName: params.costCenterGroupCategoryName,
      page: pagination.page,
      size: pagination.pageSize
    }
    costCenterGroupService.getCostCenterGroupClassList(_params)
      .then(res => {
        pagination.total = Number(res.headers['x-total-count']) || 0;
        pagination.current = pagination.page + 1;
        this.setState({
          data: res.data,
          pagination,
          loading: false,
        });
      }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击搜索
  onSearch = (result) => {
    let pagination = this.state.pagination;
    pagination.page = 0;
    this.setState({
      pagination,
      params: result
    }, () => {
      this.getCostCenterGroupClassList()
    });
  };

  //分页点击
  onChangePager = (_pagination, filters, sorter) => {
    let pagination = this.state.pagination;
    pagination.page = _pagination.current - 1;
    pagination.pageSize = _pagination.pageSize;
    this.setState({
      pagination,
    }, () => {
      this.getCostCenterGroupClassList();
    })
  };

  //点击新建
  onClickNew = () => {
    this.setState({
      record: deepCopy(defaultRecord),
    },()=>{
      this.showSlide(true);
    })
  };

  //侧滑关闭后
  afterCloseSlide = () => {
    this.getCostCenterGroupClassList();
    this.showSlide(false);
  };

  //show侧滑
  showSlide = (flag) => {
    this.setState({
      visible: flag,
    })
  };
  //点击编辑
  onClickEdit = (e, record) => {
    this.setState({
      record,
    });
    this.showSlide(true);
  };
  //点击每一行的详情
  onRecordDetail = (e, record) => {
    const {costCenterGroupClassDetail} = this.state;
    this.setState({
      record: record,
    });
    this.context.router.push({
      pathname: costCenterGroupClassDetail,
      state: record
    })
  };

  //点击重置
  clear = () => {
    let params = {
      setOfBookId: "",
      costCenterGroupCategoryCode: "",
      costCenterGroupCategoryName: ""
    }
    let pagination = this.state.pagination;
    pagination.page = 0;
    pagination.total = 0;
    this.setState({
      params,
      pagination
    }, () => {
      this.getCostCenterGroupClassList();
    })
  };

  render() {
    const {searchForm, data, columns, loading, visible, pagination,record} = this.state;
    return (
      <div className='cost-center-group-class-define'>
        <SearchArea searchForm={searchForm}
                    submitHandle={this.onSearch}
                    clearHandle={this.clear}/>
        <br/>
        <Button onClick={this.onClickNew}
                type={'primary'}>
          {messages('common.create')/*新建*/}
          </Button>
        <div style={{marginTop: 10, marginBottom: 10}}>
          {messages('common.total', {total: `${pagination.total}`})}{/*共搜索到{pagination.total}条数据*/}
        </div>
        <div className={'cost-center-group-class-define-table'}>
          <ResizeTable
            bordered
            size={'middle'}
            rowKey={'id'}
            dataSource={data}
            columns={columns}
            loading={loading}
            onChange={this.onChangePager}
            pagination={pagination}
          />
        </div>
        <div>
          <SlideFrame
            title={record.id ? messages('setting.key1669')/*编辑成本中心组类别*/ : messages('setting.key1670')/*新建成本中心组类别*/}
            show={visible}
            content={EditCostCenterGroup}
            afterClose={this.afterCloseSlide}
            onClose={() => this.showSlide(false)}
            params={{record: record, show: visible}}/>
        </div>
      </div>
    )
  }

}

CostCenterGroupDefine.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps)(CostCenterGroupDefine);
